<template>
  <div>
    <a-tabs v-model:activeKey="activeKey" type="card">
      <a-tab-pane key="1" tab="定向">
        <CrowdTable
          :columns="columns"
          :crowdList="crowdList"
          :disabledItems="exSelectedItems"
          v-model:selectedItems="inSelectedItems"
          @update:selectedItems="handleInSelectedItems"
          :fieldName="fieldName"
        />
      </a-tab-pane>
      <a-tab-pane key="2" tab="排除" v-if="showDeclude">
        <CrowdTable
          :columns="columns"
          :crowdList="crowdList"
          :disabledItems="inSelectedItems"
          v-model:selectedItems="exSelectedItems"
          @update:selectedItems="handleExSelectedItems"
          :fieldName="fieldName"
        />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import CrowdTable from "./CrowdTable.vue";
import _ from "lodash";

// 定义列类型
interface ColumnType {
  title: string;
  dataIndex: string;
  key: string;
  width?: number;
  customRender?: (options: { record: any, text: any }) => any;
}

const { columns, audience, crowdList, fieldName } = defineProps({
  columns: {
    type: Array as () => ColumnType[],
    default: () => [],
  },
  crowdList: {
    type: Array,
    default: () => [],
  },
  fieldName: {
    type: String,
    default: "id",
  },
  // 是否显示排除
  showDeclude: {
    type: Boolean,
    default: true,
  },
  audience: {
    type: Object,
    default: {
      include: [],
      exclude: [],
    },
  },
});

const inSelectedItems = ref(_.cloneDeep(audience.include));
const exSelectedItems = ref(_.cloneDeep(audience.exclude));

const activeKey = ref("1");
const emit = defineEmits(["update:audience"]);

const handleInSelectedItems = (selectedItems: number[]) => {
  inSelectedItems.value = selectedItems;
  emit("update:audience", {
    include: inSelectedItems.value,
    exclude: exSelectedItems.value,
  });
};

const handleExSelectedItems = (selectedItems: number[]) => {
  exSelectedItems.value = selectedItems;
  emit("update:audience", {
    include: inSelectedItems.value,
    exclude: exSelectedItems.value,
  });
};
</script>

<style scoped lang="less"></style>
